<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        ul {
            padding: 0;
            margin: 0;
            list-style: none;
            width: 600px;
            margin: 0 auto;
        }
        ul li {
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid #ccc;
            text-align: center;
        }
    </style>
</head>
<body>


    
      <!-- 
            <ul>
                <li>作词:彭钧/李润</li>
            </ul> 
        -->

    <script>
        // 课堂练习
        // 歌词数组
        // 
        var lyricArray = [
            ["作词:彭钧/李润"],
            ["作曲:彭钧"],
            ["快乐池塘栽种了梦想就变成海洋"],
            ["鼓的眼睛大嘴巴同样唱的响亮"],
            ["借我双小翅膀就能飞向太阳"],
            ["我相信奇迹就在身上"]
        ]

        // 问题：
            // 如何取出这句歌词 “快乐池塘栽种了梦想就变成海洋”
            // lyricArray[2][0]
        // 是否使用双重循环，1.看数据结构（单一） 2. 页面结构

        // 看到数组，必须想起索引值，想起循环！！！
        // 定义字符串
        var str = "<ul>";
        // 循环数组
        for(var i = 0 ; i < lyricArray.length ; i ++){
            // 拼接li标签
            str += "<li>"+lyricArray[i][0]+"</li>";
        }

        // 开闭原则
        str +="</ul>"

        // 渲染html字符串
        document.write(str);
        
        
        



    </script>
</body>
</html>